<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>住宿偏好</title>
		<link href="../mui/css/mui.min.css" rel="stylesheet" />
		<link href="../styles/default.css" rel="stylesheet" />
		<style type="text/css">
			/* 头部导航--开始 */
			.hotel-header {
				color: #e61874;
				padding-left: 1.2rem;
				padding-right: 1.2rem;
				background: #fff;
			}
			
			.mui-title,
			.hotel-header .mui-icon {
				color: #e61874;
			}
			
			.mui-bar .mui-btn-nav.mui-pull-left {
				margin-left: 0;
			}
			
			.hotel-header .mui-btn {
				font-size: 1.4rem;
				color: #333;
			}
			
			.hotel-header .finish {
				color: #e61874;
			}
			/* 头部导航--结束 */
			
			.hobby-select {
				padding: 1.5rem 0;
				margin-bottom: 1.2rem;
				background-color: #fff;
			}
			
			.hobby-title {
				font-size: 0;
				padding: 1.5rem 0 1.5rem 2.4rem;
			}
			
			.title {
				font-size: 1.6rem;
				color: #333;
				padding: 0 0 0.9rem;
				margin: 0;
			}
			
			.hobby-title span {
				font-size: 1rem;
				color: #e61874;
			}
			
			.hobby-select li {
				font-size: 1.4rem;
				color: #333;
				padding-top: 1.5rem;
				padding-bottom: 1.5rem;
				padding-left: 4.5rem;
			}
			
			.hobby-select li.active {
				position: relative;
				color: #e61874
			}
			
			.hobby-select li.active:before {
				position: absolute;
				left: 2.4rem;
				bottom: 1.8rem;
				content: '';
				width: 1.2rem;
				height: 0.9rem;
				background: url(../styles/images/order/icon_choose.png@2x.png) no-repeat;
				background-size: 1.2rem 0.9rem;
			}
			
			.mui-table-view-cell {
				font-size: 1.6rem;
				color: #333;
				padding: 1.45rem 1.2rem 1.45rem 2.4rem;
			}
			
			.mui-switch-blue {
				border: 2px solid #e4e4e4;
			}
			
			.mui-switch-blue.mui-active {
				background-color: #e61874;
				border: 2px solid #e61874;
			}
			
			.mui-table-view-cell:before,
			.mui-table-view-cell:after {
				height: 0;
			}
			
			.mui-input-row {
				position: relative;
				margin: 0 2.4rem 0 2.4rem;
				padding-bottom: 1.5rem;
				border-radius: 0.4rem;
			}
			
			.mui-input-row div {
				position: absolute;
				right: 1.2rem;
				bottom: 2.7rem;
				font-size: 1.2rem;
				color: #ccc;
			}
			
			textarea {
				font-size: 1.4rem;
				color: #333;
				padding: 1.2rem;
				margin-bottom: 0;
				border: 1px solid #e0e0e0;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hotel-header">
			<button class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">取消</button>
			<button id="finish" class="mui-btn mui-btn-link mui-pull-right finish">完成</button>
			<h1 class="mui-title">住宿偏好</h1>
		</header>
		<div class="mui-content">
			<div class="hobby-title">
				<h5 class="title">偏好要求</h5>
				<span>酒店针对您的偏好尽量安排，但不能保证，请您谅解</span>
			</div>
			<ul id="hobby-select" class="hobby-select">
				<li id="" class="hobby-item active">无要求</li>
				<li id="" class="hobby-item">尽量安排位置安静的房间</li>
				<li id="" class="hobby-item">尽量安排有情趣用品的房间</li>
			</ul>
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<span>我有其他要求</span>
					<div class="mui-switch mui-switch-blue mui-switch-mini">
						<div class="mui-switch-handle"></div>
					</div>
				</li>
				<div id="textarea-wrap" class="mui-input-row" style="display: none;">
					<textarea id="textarea" rows="5" placeholder="您可以输入其他要求..."></textarea>
					<div>还可以输入<span class="count">50<span>字</div>
					</div>
				</ul>
		</div>
		<script src="../mui/js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages: [{
					id: 'fill-in-order.html',
					url: 'fill-in-order.html'
				}],
				swipeBack:true //启用右滑关闭功能
			});
			
			// 偏好要求
			var hobbyItem = document.getElementsByClassName("hobby-item"); // 获取所有选项
			var need = '';
			for(var i = 0; i < hobbyItem.length; i++) {
				hobbyItem[i].id = i;
				hobbyItem[i].addEventListener('tap', function(e) {
					var len = this.parentNode.children.length;
					for(var j = 0; j < len; j++) {
						hobbyItem[j].classList.remove('active');
					}
					this.classList.add('active');
				});
			}
//				if(this.classList.contains('active')) {
//					this.classList.remove('active');
//				}
			
			
			// 其他要求
			var textareaWrap = document.getElementById("textarea-wrap"); // 文本域父层
			var textarea = document.getElementById("textarea"); // 文本域
			mui('.mui-content .mui-switch').each(function() { //循环所有toggle
				this.addEventListener('toggle', function(event) {
					if(event.detail.isActive) {
						textareaWrap.style.display = 'block';
					} else {
						textareaWrap.style.display = 'none';
						textarea.value = '';
					}
				});
			});
			
			// 向填写订单页传值
			var fillInOrderPage = null;
			
			// 添加列表项的点击事件
			mui('.hotel-header').on('tap', '#finish', function(event) {
				for (var i = 0; i < hobbyItem.length; i++) {
					if(hobbyItem[i].classList.contains('active')){
						if(hobbyItem[i].id == 0) {
							need = "无";
						} else {
							need = hobbyItem[i].innerHTML;
						}
					}
				}
				textinput = textarea.value;
				// 获得酒店详情页
				if(!fillInOrderPage) {
					fillInOrderPage = plus.webview.getWebviewById('fill-in-order.html');
				}
				// 触发详情页的hdID事件
				mui.fire(fillInOrderPage, 'fillID', {
					need: need,
					textinput: textinput
				});
				// 打开酒店详情页面
//				mui.openWindow({
//					id: 'fill-in-order.html',
//					show: {
//						autoShow: true
//					}
//				});
				mui.back();
			});
		</script>
	</body>

</html>